<template>
  <view>
    <view class="content">
      <view class="commnums">全部评价 ({{ list.length }})</view>
      <view class="lists" v-for="(item, i) in list" :key="i">
        <view class="avtar">
          <image class="img" :src="item.user_avatar" mode="" />
          <view class="rig">
            <view class="zbt">{{ item.nickname }}</view>
            <view class="des">{{ item.createtime | formatDate }}</view>
          </view>
        </view>
        <view class="text">{{ item.content }}</view>
        <view class="phops" v-if="item.images.length != 0">
          <view v-for="(imgas, j) in item.images" :key="j">
            <image
              class="img"
              :src="imgas"
              mode="aspectFill"
              @click="previewImage(item.images, j)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1, // 页码
      pageSize: 10, // 每页条数
      list: [],
      total: "",
      last_page: "",
      id: "",
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getComments();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    // 获取商品评价列表
    async getComments() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "goods/getComments",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          id: this.id,
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 获取商品下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "goods/getComments",
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          id: this.id,
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 预览图片
    previewImage(item, eq) {
      let getUrl = item;
      uni.previewImage({
        current: getUrl[eq],
        urls: getUrl,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
  height: 100vh;
  position: relative;
}
.content {
  overflow: hidden;
  .commnums {
    width: 100%;
    box-sizing: border-box;
    padding: 35rpx 30rpx;
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
    background: #f4f4f4;
  }
  .lists {
    width: 100%;
    min-height: 150rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 30rpx;
    border-bottom: 1px solid #eee;
    .avtar {
      display: flex;
      margin-bottom: 25rpx;
      .img {
        display: block;
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }
      .rig {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .zbt {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
        }
        .des {
          font-size: 20rpx;
          color: #999999;
        }
      }
    }
    .text {
      font-size: 28rpx;
      color: #333333;
    }
    .phops {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 25rpx;
      .img {
        display: block;
        width: 220rpx;
        height: 220rpx;
        margin-right: 15rpx;
        border-radius: 4rpx;
      }
    }
  }
  .lists:last-child {
    border-bottom: none;
  }
}
</style>
